import React from 'react';
import {StyleSheet, Text, View} from 'react-native';

import MyIconFill from '../../../assets/icons/account_fill.svg';
import MyIcon from '../../../assets/icons/account.svg';
import HomeIconFill from '../../../assets/icons/home_fill.svg';
import HomeIcon from '../../../assets/icons/home.svg';
import MiningIconFill from '../../../assets/icons/mining_fill.svg';
import MiningIcon from '../../../assets/icons/mining.svg';
import {primaryColor, secondaryColor} from '../../../theme/default';

interface NavigationIconProps {
  route: string;
  tabBarLabel?: string;
  isFocused: boolean;
}

const NavigationIcon = ({
  route,
  tabBarLabel,
  isFocused,
}: NavigationIconProps) => {
  const renderIcon = (route: string, isFocues: boolean) => {
    let height: number = 24;
    let width: number = 24;

    switch (route) {
      case 'Home':
        return isFocues ? (
          tabBarLabel == undefined ? (
            <HomeIconFill height={height} width={width} color={primaryColor} />
          ) : (
            <View style={{justifyContent: 'center', alignItems: 'center'}}>
              <HomeIconFill
                height={height}
                width={width}
                color={primaryColor}
              />
              <Text style={{color: primaryColor}}>{tabBarLabel}</Text>
            </View>
          )
        ) : tabBarLabel == undefined ? (
          <HomeIcon height={height} width={width} color={secondaryColor} />
        ) : (
          <View style={{justifyContent: 'center', alignItems: 'center'}}>
            <HomeIcon height={height} width={width} color={secondaryColor} />
            <Text style={{color: secondaryColor}}>{tabBarLabel}</Text>
          </View>
        );
      case 'Mining':
        return isFocues ? (
          tabBarLabel == undefined ? (
            <MiningIconFill
              height={height}
              width={width}
              color={primaryColor}
            />
          ) : (
            <View style={{justifyContent: 'center', alignItems: 'center'}}>
              <MiningIconFill
                height={height}
                width={width}
                color={primaryColor}
              />
              <Text style={{color: primaryColor}}>{tabBarLabel}</Text>
            </View>
          )
        ) : tabBarLabel == undefined ? (
          <MiningIcon height={height} width={width} color={secondaryColor} />
        ) : (
          <View style={{justifyContent: 'center', alignItems: 'center'}}>
            <MiningIcon height={height} width={width} color={secondaryColor} />
            <Text style={{color: secondaryColor}}>{tabBarLabel}</Text>
          </View>
        );
      case 'My':
        return isFocues ? (
          tabBarLabel == undefined ? (
            <MyIconFill height={height} width={width} color={primaryColor} />
          ) : (
            <View style={{justifyContent: 'center', alignItems: 'center'}}>
              <MyIconFill height={height} width={width} color={primaryColor} />
              <Text style={{color: primaryColor}}>{tabBarLabel}</Text>
            </View>
          )
        ) : tabBarLabel == undefined ? (
          <MyIcon height={height} width={width} color={secondaryColor} />
        ) : (
          <View style={{justifyContent: 'center', alignItems: 'center'}}>
            <MyIcon height={height} width={width} color={secondaryColor} />
            <Text style={{color: secondaryColor}}>{tabBarLabel}</Text>
          </View>
        );

      default:
        break;
    }
  };

  return <View>{renderIcon(route, isFocused)}</View>;
};

const styles = StyleSheet.create({});

export default NavigationIcon;
